<script lang="ts">
export default {
  name: "datasource-edit"
};
</script>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import router from "/@/router";
import { get, add, update } from "/@/api/system/datasource";
import { ResponseType } from "/@/utils/http";
import { message } from "@pureadmin/components";
import { FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>();

// do not use same name with ref
const form = reactive({
  dataSourceName: "",
  url: "",
  username: "",
  password: "",
  driverClassName: ""
});
const rules = reactive<FormRules>({
  dataSourceName: [{ required: true, message: "数据源名不能为空" }],
  url: [{ required: true, message: "连接url不能为空" }],
  username: [{ required: true, message: "用户名不能为空" }],
  driverClassName: [{ required: true, message: "驱动名称不能为空" }]
});
let loading = ref(true);

let isUpdate = computed(
  () =>
    router.currentRoute.value.params?.id !== undefined &&
    router.currentRoute.value.params?.id != "0"
);

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const data: any = toRaw(form);
      loading.value = true;
      let resp: ResponseType;
      if (isUpdate.value) {
        data.id = router.currentRoute.value.params?.id;
        resp = update(data);
      } else {
        resp = add(data);
      }
      resp
        .then(resp => {
          if (resp.code === 200) {
            message.success(resp.msg);
            router.back();
          } else {
            message.error(resp.msg);
          }
        })
        .finally(() => (loading.value = false));
    }
  });
};

function cancel() {
  router.back();
}

onMounted(() => {
  if (isUpdate.value) {
    getData();
  } else {
    loading.value = false;
  }
});

function getData() {
  loading.value = true;
  get(Number(router.currentRoute.value.params?.id))
    .then(({ data }) => {
      form.dataSourceName = data?.dataSourceName;
      form.url = data?.url;
      form.username = data?.username;
      form.password = data?.password;
      form.driverClassName = data?.driverClassName;
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>

<template>
  <div class="container bg-white" v-loading="loading">
    <p
      class="font-bold mb-4 text-center"
      :style="`font-size: var(--el-font-size-large)`"
    >
      数据源{{ isUpdate ? "修改" : "添加" }}
    </p>
    <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
      <el-form-item label="数据源名：" prop="dataSourceName" required>
        <el-input v-model="form.dataSourceName" />
      </el-form-item>
      <el-form-item label="连接url：" prop="url" required>
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="用户名：" prop="username" required>
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="驱动名称：" prop="driverClassName" required>
        <el-input v-model="form.driverClassName" />
      </el-form-item>
      <el-row justify="center" style="width: 100%">
        <el-button
          type="primary"
          @click="onSubmit(ruleFormRef)"
          style="width: 100px"
          >{{ isUpdate ? "修改" : "添加" }}
        </el-button>
        <el-button type="danger" style="width: 100px" @click="cancel"
          >取消
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 30px;
}
</style>
